@media (min-width: 1920px) {
    .about{
        height: 750px !important;
    }
    .ability{
        .section-3{
            height: 750px !important;
        }
        .section-7{
            height: 937px !important;
        }
    }
    .recruit{
        height: 937px !important;
    }
}

@media (max-width: 768px) {
    // ---------------------common---------------------
    .container{
        padding:0 15px;
    }

    // ---------------------模块------------------------
    .banner{
        .headtitle{
            h1{
                font-size:6vh !important;
            }
        }
    }
    .ability{
        .section-2{
            .shadow{
                max-width:98% !important;
                .bear{
                    width: 100% !important;
                    img{
                        max-width:100% !important;
                        margin: auto;
                    }
                }
            }
        }
        .section-3{
            .shadow{
                width:90% !important;
                padding: 215px 15px 15px 15px !important;
                height: 425px !important;
                background:#1B1B1B !important;
                .bear{
                    width:150px !important;
                    height:150px !important;
                    img{
                        width:100%;
                    }
                }
                h5{
                    display: block !important;
                }
                p{
                    display: block !important;
                }
            }
        }
        .section-7{
            .lists{
                .list{
                    &.left{
                        padding-left: 50px !important;
                    }
                    &.right{
                        padding-left: 220px !important;
                    }
                }
            }
        }
    }
}

@media (max-width: 767px) {
    // ---------------------common---------------------
    .container{
        padding:0 !important;
    }
    h1{
        font-size:24px !important;
    }
    h2{
        font-size:20px !important;
    }
    h5,h6{
        font-size:16px !important;
    }
    .headTitle{
        height:100px !important;
        p{
            font-size: 16px !important;
        }
    }
    .flex-grow{
        display: block !important;
        .flex-item{
            width:100% !important; 
        }
    }

    // ---------------------模块------------------------
    .header{
        .container{
            .btn{
                display: inline-block !important;
            }
            .navbar{
                position: absolute;
                top:70px;
                width:100%;
                height:0px !important;
                border-top:1px solid rgba(255,255,255,.3) !important;
                ul{
                    border-bottom:1px solid rgba(255,255,255,.3);
                    background: rgba(0,0,0,.5) !important;
                    flex-direction: column !important;
                    li{
                        height:40px;
                        line-height: 40px;
                    }
                }
            }
        }
    }
    .banner{
        .headtitle{
            top: 60% !important;
            letter-spacing: inherit !important;
            animation: none !important;
            h1{
                font-size:5vh !important;
            }
        }
    }
    .about{
        .sectionBg{
            top:auto !important;
            bottom:0;
        }
        .container{
            padding:0 10px !important;
            background:#1c1c1c;
        }
        .ban-about{
            position: inherit !important;
            .ban-info{
                margin-top:0px !important;
            }
            .ban-pic{
                img{
                    float: inherit !important;
                    max-width:80%;
                    margin:0 auto;
                    height:auto !important;
                }
            }
        }
    }
    .ability{
        .section-1{
            height:auto !important;
            .imgs{
                overflow: hidden;
                height:400px !important;
                position: inherit !important;
                top:0 !important;
                transform: translateY(0) !important;
            }
            .animate-item{
                top:50% !important;
                right:auto !important;
                left:50% !important;
                transform: translate(-50%,-50%);
                margin-top:0px !important;
                &:nth-child(1){
                    width: 200px !important;
                    height: 305px !important;
                    .leida{
                        width:100px !important;
                        height:100px !important;
                        right:-3px !important;
                    }
                }
                &:nth-child(2){
                    .bg{
                        width: 150px !important;
                    }
                }
                &:nth-child(3){
                    img{
                        width: 200px !important;
                        right:auto !important;
                        left:50%;
                        margin-left:-100px;
                    }
                }
                &:nth-child(4){
                    .bg{
                        width:200px !important;
                        height: 305px !important;
                        right:auto !important;
                        left:50%;
                        margin-left:-100px;
                    }
                    .voice{
                        right:0px !important;
                    }
                }
            }
            .content{
                height:auto !important;
                .swiper-control-box{
                    background:rgba(255,255,255,.2);
                }
            }
        }
        .section-2{
            padding:0 10px;
            .title{
                padding: 25px 0 30px 0 !important;
                p{
                    font-size:14px !important;
                }
            }
            .flex-item{
                padding-bottom: 30px !important;
                .shadow{
                    max-width:98% !important;
                    .bear{
                        width: 100% !important;
                        img{
                            max-width:100% !important;
                            margin: auto;
                        }
                    }
                }
                p{
                    margin-top: 20px !important;
                }
            }
        }
        .section-3{
            background: #000;
            .title{
                padding: 25px 0 30px 0 !important;
            }
            .flex-grow{
                overflow: hidden;
                padding-bottom: 50px !important;
            }
            .flex-item{
                margin-bottom:15px;
                width:50% !important;
                float:left;
            }
            .shadow{
                height: 340px !important;
                padding: 135px 15px 15px 15px !important;
                .bear{
                    top: 20px !important;
                    width: 100px !important;
                    height: 100px !important;
                }
                h5{
                    display: block !important;
                }
                // p.wap{
                //     display: block !important;
                // }
            }
        }
        .section-4{
            padding-bottom:50px !important;
            .title{
                padding: 30px 0 20px 0 !important;
            }
            .details{
                margin:50px 0 !important;
                .example{
                    height:auto !important;
                    display: block !important;
                    .legend{
                        width:100%;
                        position: initial !important;
                        display: flex;
                        div{
                            flex:1;
                            &:before{
                                left:10px !important;
                            }
                        }
                    }
                }
            }
            .flex-grow{
                padding:0 10px !important;
                .flex-item{
                    margin-bottom:20px;
                    p{
                        padding:0 !important;
                    }
                }
            }
        }
        .section-5{
            padding:50px 0 !important;
            .flex-item{
                margin-bottom:10px;
                .img{
                    max-width: 100% !important;
                    margin:0 !important;
                }
            }
        }
        .section-6{
            height:auto !important;
            .flex-grow{
                height:auto !important;
                .flex-item{
                    margin-top: 30px !important;
                    .shadow{
                        opacity: 1 !important;
                        .title{
                            width: 150px !important;
                            height: 35px !important;
                            line-height: 35px !important;
                            font-size:20px !important;
                        }
                        .subtitle{
                            top:130px;
                            left:50%;
                            font-size:16px !important;
                            line-height: 25px !important;
                            transform: translate3d(-50%,0,0) !important;
                        }
                        .item{
                            bottom:20px;
                            left:50%;
                            font-size:14px !important;
                            line-height: 25px !important;
                            transform: translate3d(-50%,0,0) !important;
                            img{
                                width:20px !important;
                                height:20px !important;
                                margin-right:10px !important;
                            }
                        }
                        .img{
                            margin-top: 0px !important;
                            height:300px !important;
                            opacity:0.3;
                            img{
                                width:90% !important;
                            }
                            &.man{
                                img{
                                    margin-left:0px !important;
                                    width: auto !important;
                                    height:280px !important;
                                }
                            }
                        }
                        &:hover{
                            .title{
                                width: 150px !important;
                                height: 35px !important;
                                line-height: 35px !important;
                                font-size:20px !important;
                                border:1px solid rgba(255,255,255,1) !important;
                                border-radius:25px !important;
                                text-align: center !important;
                                margin:auto !important;
                            }
                            .img{
                                img{
                                    bottom:50px !important;
                                    width:90% !important;
                                    margin-left:0px !important;
                                }
                                &.man{
                                    img{
                                        width:auto !important;
                                        bottom:0px !important;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .section-7{
            background: #111;
            height:auto !important;
            .title{
                padding: 30px 0 20px 0 !important;
                p{
                    font-size: 14px !important;
                }
            }
            .lists{
                &.lists-1{
                    .list{
                        &.left{
                            display: none !important;
                        }
                        &.right{
                            display: none !important;
                        }
                    }
                }
                &.lists-2{
                    display: block !important;
                }
            }
        }
    }
    .partner{
        height:auto !important;
        .flex-grow{
            overflow: hidden;
            .flex-item{
                width:50% !important;
                float:left;
                p{
                    font-size:12px;
                }
                .nkd{
                    .img{
                        width:125px !important;
                        height:120px !important;
                    }
                    &:hover{
                        .img{
                            width:125px !important;
                            height:120px !important;
                        }
                        p{
                            font-size:12px !important;
                        }
                    }
                }
                .hgd{
                    .img{
                        width:138px !important;
                        height:120px !important;
                    }
                    &:hover{
                        .img{
                            width:138px !important;
                            height:120px !important;
                        }
                        p{
                            font-size:12px !important;
                        }
                    }
                }
            }
        }
    }
    .recruit{
        .swiper-container{
            padding-bottom:50px;
        }
        .slider-inner{
            .detail{
                margin-left:10px !important;
                margin-right:10px !important;
                .list{
                    padding-right:0px !important;
                }
            }
        }
        .swiper-button-prev{
            width:30px !important;
            height:30px !important;
            top:auto !important;
            bottom:10px !important;
            left:50px !important;
        }
        .swiper-button-next{
            width:30px !important;
            height:30px !important;
            top:auto !important;
            bottom:10px !important;
            right:50px !important;
        }
        .footer{
            position: inherit !important;
            .container{
                height:auto !important;
                padding: 0px 10px 20px 10px !important;
            }
            .rights{
                height:auto !important;
                line-height: 20px !important;
                padding:15px 10px;
            }
        }
    }
    
}

@keyframes attention {
    0% {
        letter-spacing: 0px;
        color: #ccc;
    }
    100% {
        letter-spacing: 8px;
        color: #fff;
    }
}